<template>
	<view class="ccontainer cflex_items">
		<view class="top cflex cflex_col">
			<view class="item cflex cflex_row cflex_between cflex_items">
				<view class="cflex cflex_row cflex_items">
					<image src="/static/clq-image/addressForm1.png" mode=""></image>
					<view>收货人</view>
				</view>
				<input class="cflex cflex_1" type="text" v-model="form.people" @blur="inputText" data-name="people" placeholder="请输入姓名"/>
			</view>
			<view class="item cflex cflex_row cflex_between cflex_items">
				<view class="cflex cflex_row cflex_items">
					<image src="/static/clq-image/addressForm2.png" mode=""></image>
					<view>手机号码</view>
				</view>
				<input class="cflex cflex_1" type="text" v-model="form.phone" @blur="inputText" data-name="phone" placeholder="请输入手机号"/>
			</view>
			<view class="item cflex cflex_row cflex_between cflex_items">
				<view class="cflex cflex_row cflex_items">
					<image src="/static/clq-image/addressForm3.png" mode=""></image>
					<view>所在省</view>
				</view>
				<input class="cflex cflex_1" type="text" v-model="form.province" @blur="inputText" data-name="people" placeholder="请输入所在省"/>
			</view>
			<view class="item cflex cflex_row cflex_between cflex_items">
				<view class="cflex cflex_row cflex_items">
					<image src="/static/clq-image/addressForm3.png" mode=""></image>
					<view>所在市</view>
				</view>
				<input class="cflex cflex_1" type="text" v-model="form.city" @blur="inputText" data-name="people" placeholder="请输入所在市"/>
			</view>
			<view class="item cflex cflex_row cflex_between cflex_items">
				<view class="cflex cflex_row cflex_items">
					<image src="/static/clq-image/addressForm3.png" mode=""></image>
					<view>所在地区-区</view>
				</view>
				<input class="cflex cflex_1" type="text" v-model="form.district" @blur="inputText" data-name="people" placeholder="请输入所在地区"/>
			</view>
			<view class="item cflex cflex_row cflex_between cflex_items">
				<view class="cflex cflex_row cflex_items">
					<image src="/static/clq-image/addressForm3.png" mode=""></image>
					<view>所在地区-详细地址</view>
				</view>
				<input class="cflex cflex_1" type="text" v-model="form.address" @blur="inputText" data-name="people" placeholder="请输入所在地区-详细地址"/>
			</view>
			<view class="item cflex cflex_row cflex_between cflex_items">
				<view class="cflex cflex_row cflex_items">
					<image src="/static/clq-image/addressForm3.png" mode=""></image>
					<view>是否默认</view>
				</view> 
			  <view> 
			   <radio-group @change="radioChange">
                <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
                    <radio :value="item.value" :checked="index === current" />
                    {{item.name}}
                </label>
               </radio-group>
              </view>
			</view>
		</view>
		<view class="item cflex cflex_row cflex_between cflex_items">
			<view class="btn-ok" @click="addaddress()">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		ajax
	} from '../../ajax.js';
	export default{
		data(){
			return{
				id:'',
				form:{
					token:'',
					people:'',
					phone:'',
					province:'',
					city:'',
					district:'',
					address:'',
					is_default:''
				},
				current:'',
				data:'',
				items: [
				{
					value: '1',
					name: '是',
					checked: 'true'
				},
				{
					value: '0',
					name: '否',
				}]				
			}
		},
		onReady:function(){
			let that = this
			if(that.id){
				uni.setNavigationBarTitle({
					title:'编辑收货地址'
				})
			}else{
				uni.setNavigationBarTitle({
					title:'新增收货地址'
				})
			}
		},
		onLoad:function(opt){
			let that = this
			that.id = opt.id
			if(that.id){
				that.getDetail()
			}
		},
		methods:{
			radioChange: function(evt) {
			  for (let i = 0; i < this.items.length; i++) {
				if (this.items[i].value === evt.target.value) {
					this.current = i;
					break;
				 }
			  }
		   },
			inputText(e) {
				let value = e.detail.value,
					key = e.currentTarget.dataset.name,
					form = this.form
				form[key] = value
				this.form = form
				console.log('this.form', this.form)
			},
			getDetail(){
				
			},
			addaddress(){
				let that = this
				let token = uni.getStorageSync("token")
				if(that.current==0){
					that.form.is_default=1
				}else{
				    that.form.is_default=2	
				}
				that.form.token=token
				
				if(that.form.people==''){
					uni.showToast({
						title: '请输入名字',
						duration: 1500,
						icon: 'none'
					});
					return
				}
				
				if(that.form.phone==''){
					uni.showToast({
						title: '请输入手机号码',
						duration: 1500,
						icon: 'none'
					});
					return
				}
				
				if(that.form.province==''){
					uni.showToast({
						title: '请输入所在省',
						duration: 1500,
						icon: 'none'
					});
					return
				}
				
				if(that.form.city==''){
					uni.showToast({
						title: '请输入所在市',
						duration: 1500,
						icon: 'none'
					});
					return
				}
				
				if(that.form.district==''){
					uni.showToast({
						title: '请输入所在地区-区',
						duration: 1500,
						icon: 'none'
					});
					return
				}
				
				if(that.form.address==''){
					uni.showToast({
						title: '请输入详细地址',
						duration: 1500,
						icon: 'none'
					});
					return
				}
				if(that.form.is_default==''){
					uni.showToast({
						title: '请选择是否默认',
						duration: 1500,
						icon: 'none'
					});
					return
				}
				
				ajax({
					url: 'address/addAddress',
					data:that.form,
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						if(res.data.code=='0'){
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}else{
							uni.setStorageSync("address",that.form)
						    uni.navigateBack()
						}
				        console.log("res", res.data)
					},
					error: function() {
				
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
	.top{ 
		width: 710rpx;
		background: #ffffff;
		border-radius: 20rpx;
	}
	.item{
		width: 100%;
		box-sizing: border-box;
		line-height: 76rpx;
		/**height: 76rpx;**/
		border-bottom: 1rpx solid #f7f7f7;
		font-size: 26rpx;
		color: #333;
		padding: 0 20rpx 0 12rpx;
		.btn-ok{
			width: 50%;
			line-height: 60rpx;
			border-radius: 30rpx;
			height: 60rpx;
			background: #FF7427;
			color: #fff;
			text-align: center;
			font-size: 28rpx;
			margin: 20rpx auto auto auto;
		}
		radio{
		
			display: inline-block;
			margin-left: 10rpx;
		}
	}
	.item image{
		width: 28rpx;
		height: 28rpx;
		margin-right: 18rpx;
	}
	input{
		width: 100%;
		box-sizing: border-box;
		font-size: 26rpx;
		color: #333;
		text-align: right;
	}
</style>
